<template>
	<view class="category-box">
		<!-- slice(开始下标，结束下标) 返回指定范围的元素，注意：包头不包尾 -->
		<!-- <view v-for="(item, index) in categoryList.slice(0, 7)" :key="index"
			@click="toPageSearch(categoryList[index].id, categoryList[index].name, index)"
		>
			{{item.name}}
		</view>
		<view @click="toPageSearch(null, '全部分类', -1)" >全部分类</view> -->
		<view @click="tabBarUrl(`/pages/zxjy/index`)" class="center column">
			<view>
				<image class="cate-img" src="https://qzy.dianteng.cc/storage/image/20230428/2bbe9fb880fedfc2c317719f60f8ad7c.png"></image>
			</view>
			<text class="cate-text">相亲交友</text>
		</view>

		<view @click="navTo(`/pages/zxhd/dtlist`)"  class="center column">
			<view>
				<image class="cate-img" src="https://qzy.dianteng.cc/storage/image/20230428/9bb46cc404b1957e958a635fcab4019a.png"></image>
			</view>
			<text class="cate-text">热门动态</text>
		</view>

		<view @click="tabBarUrl(`/pages/zxjy/index`)" class="center column">
			<view>
				<image class="cate-img" src="https://qzy.dianteng.cc/storage/image/20230428/35f712aff90862851afe9bb38884acc8.png"></image>
			</view>
			<text class="cate-text">缘分速配</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			jbstate:'',
			categoryList: { // 分类数据
				type: Array,
				default: () => [{
						id: 1,
						name: 'java'
					},
					{
						id: 2,
						name: '运维'
					},
					{
						id: 3,
						name: 'Python'
					},
					{
						id: 4,
						name: 'UI设计'
					},
					{
						id: 5,
						name: '大数据'
					},
					{
						id: 6,
						name: '前端'
					},
					{
						id: 7,
						name: 'PHP'
					},
					{
						id: 8,
						name: 'VUE'
					},
				]
			}
		},

		methods: {
			// 跳转到搜索页
			toPageSearch(id, name, index) {
				console.log('id', id)
				const params = {
					categoryId: id,
					name: name,
					activeIndex: index
				}
				this.navTo(`/pages/search/search?params=${ JSON.stringify(params) }`)
			},

		
		}
	}
</script>

<style lang="scss">
	.category-box {
		display: flex;
		justify-content: space-around;
		// 不行显示不下，自动换行
		flex-wrap: wrap;
		// 上 右 下 左
		padding: 20rpx 30rpx 0 30rpx;

		.cate-img {
			width: 143rpx;
			height: 93rpx;
		}

		.cate-text {
			width: 102rpx;
			height: 25rpx;
			font-size: 26rpx;
			font-family: PingFang;
			font-weight: bold;
			color: #3F3F3F;
			line-height: 35rpx;
			text-align: center;
			white-space: nowrap;
			margin-top: 10rpx;
		}
	}
</style>
